<?php
/*
 * 演示：分页
 * 提示：为了方便查看，这次界面不是那么丑了
 * 用到了Bootstrap这个前端框架。我对这个比较熟悉，所以就用这个
*/
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Ajax登录</title>
		<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<style>
			#wrapper {
				width:600px;
				margin:0 auto;
			}
			#loading {
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<h1>Ajax登录演示</h1>
			<div id="loading" class="alert alert-info">加载中，请稍候</div>
			<h3>基本信息</h3>
			<div>
				<input id="user" type="text" class="form-control" placeholder="用户名">
				<input id="password" type="text" class="form-control" placeholder="密码">
				<input id="submit" type="button" class="btn btn-primary" value="确定">
			</div>
		</div>
		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<script>
			$('#submit').bind('click',function(){ //加载主函数
				$('#loading').show();
				$.ajax({
					"url":'demo-ajax.php',
					"dataType":"text",
					"type":"POST",
					"data":{
						"user":$('#user').val(),
						"password":$('#password').val()
					},
					"success":function(data){
						data=$.parseJSON(data); //解析JSON
						$('#loading').hide();
						if (typeof(data.error)==='undefined' || data.error===null) {
							alert('加载失败，请刷新重试');
							return;
						}
						if (data.error==0) {
							alert('登录成功，您的ID是：'+data.id);
						} else {
							alert(data.errinfo)
						}
					},
					"error":function(){
						alert('加载失败，请刷新重试');
						$('#loading').hide();
						return;
					}
				});
			});
		</script>
	</body>
</html>